<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" disabled title="综合" />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        title="价格"
        @change="priceChangeVal"
      />
      <van-dropdown-item
        v-model="CategoryVal"
        :options="filterCategory"
        title="分类"
        @change="categoryChangeVal"
      />
    </van-dropdown-menu>
    <!-- 所搜为空显示空页面 -->
    <van-empty
      v-if="goodslist.length === 0"
      image="search"
      description="没有搜索到相关商品"
    />
    <!-- 数据传递 -->
    <proudction v-else :goodslist="goodslist"></proudction>
  </div>
</template>

<script>
import proudction from "@/components/production";

export default {
  props: ["goodslist", "filterCategory"],
  components: {
    proudction,
  },
  methods: {
    categoryChangeVal(value) {
      console.log(value);
      this.$emit("categoryChangeVal", value);
    },
    priceChangeVal(value) {
      this.$emit("priceChangeVal", value);
      // console.log(value);
    },
  },
  updated() {
    // console.log(this.filterCategory);
    this.filterCategory.map((item) => {
      if (item.checked) {
        this.CategoryVal = item.value;
      }
    });
  },
  data() {
    return {
      CategoryVal: "",
      value1: 1,
      value2: "b",
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    };
  },
};
</script>
 
<style lang = "less" scoped>
</style>